<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画变换</title>
		<style type="text/css">
			@keyframes fangda{
				from{width: 100px;height: 100px;transform: rotate( 0deg);}
				10%{
					width: 120px;height: 120px;
					transform: rotate(10deg);
				}
				20%{
					width: 140px;height: 140px;
					transform: rotate(20deg);
				}
				30%{
					width: 160px;height: 160px;
					transform: rotate(30deg);
				}
				40%{
					width: 180px;height: 180px;
					transform: rotate(40deg);
				}
				50%{
					width: 200px;height: 200px;
					transform: rotate(50deg);
				}
				60%{
					width: 220px;height: 220px;
					transform: rotate(60deg);
				}
				70%{
					width: 250px;height: 250px;
					transform: rotate(70deg);
				}
				80%{
					width: 270px;height: 270px;
				}
				to{width: 300px;height: 300px;transform: rotate(80deg);}
			}
			#book3{
				animation-name: fangda;
				
				/*animation-direction: alternate;*/
				animation-direction: alternate;
				animation-duration: 3s;
				animation-iteration-count: infinite;
				animation-fill-mode: both;
				
			}
		</style>
	</head>
	<body>
		<img src="book-03.jpg" id="book3" />
	</body>
</html>
